<template>
  <div class="main" style="height:100%;">
    <header>
      <div class="register-aliyun-topbar">
        <div class="aliyun-topbar-header">
          <div class="aliyun-topbar-element aliyun-logo">
            <a class="aliyun-logo-link">
              <img src="../../assets/logo.png" class="aliyun-logo-image" />
            </a>
            <!-- <span class="topbar-text">Manange</span> -->
            <!-- <div>
              <span
                class="ant-pro-account-avatar ant-dropdown-trigger ant-pro-global-header-index-action"
              >
                <span
                  class="antd-pro-global-header-index-avatar ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-image"
                >
                  <img
                    src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                  />
                </span>
                <span>{{ userInfo.UserName }}</span>
              </span>
            </div>-->
            <a-dropdown class="userName">
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                <span>{{ userInfo.UserName }}</span>
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;" @click="LoginOut">退出登录</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="resetPassword">修改密码</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </div>
      </div>
    </header>
    <div class="flex h100">
      <leftMenu class="leftMenu"></leftMenu>
      <div class="RightContent">
        <router-view class="routerView"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import leftMenu from '@/components/menu/leftMenu'
export default {
  data() {
    return {
      userInfo: [],
    }
  },
  components: {
    leftMenu,
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('BackUserInfo'))[0]
    console.log('this.userInfo :>> ', this.userInfo)
  },
  methods: {
    LoginOut() {
      sessionStorage.setItem('BackLoginStatus', false)
      this.$router.push({ path: '/login' })
    },
    resetPassword() {
      this.$router.push({ path: '/resetPassword' })
    },
  },
}
</script>

<style lang="less" scoped>
@import url('index.less');
.flex {
  display: flex;
}
.leftMenu {
  height: 100%;
  background-color: #001529;
}
.RightContent {
  background: #f0f2f5;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
}
.routerView {
  background: white;
  margin: 25px;
  position: relative;
  padding: 30px;
  padding-top: 50px;
  padding-bottom: 168px;
  height: 93.8%;
  overflow-y: scroll;
}
.h100 {
  height: 100%;
}
</style>